import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { useHistory, withRouter } from 'react-router-dom/cjs/react-router-dom.min'

export default function NowPlaying(props) {
    const [list, setList] = useState([])
    useEffect(() => {
        axios.get(`/test.json`).then(res => {
            setList(res.data.data.films)
        })
    }, [])

    // const history = useHistory();

    // const changeFilm = (id) => {
    //     // window.location.href = '#/detail/' + id
    //     // props.history.push(`/detail/${id}`)
    //     history.push(`/detail/${id}`)
    //     // history.push({ pathname: '/detail', query: { filmId: id } })
    //     // history.push({ pathname: '/detail', state: { filmId: id } })
    // }

    return (
        <div style={{ marginTop: '50px' }}>
            <ul>
                {
                    list.map(item =>
                        // <li key={item.filmId} onClick={() => {
                        //     changeFilm(item.filmId);
                        // }}>{item.name}</li>
                        <WithFilmItem key={item.filmId} {...item} />
                    )
                }
            </ul>
        </div>
    )
}

function FilmItem(props) {
    let { name, filmId } = props
    return <li onClick={() => {
        props.history.push(`/detail/${filmId}`)
    }}>
        {filmId} - {name}
    </li>
}

const WithFilmItem = withRouter(FilmItem)